<template>
  <div class="mode-select">
    <div class="mode-boxs" :style="{background:btnBg}">
      <div class="mode-btn" :class="{ 'is-active': mode === item.value }" v-for="(item,index) in modes" :key="index"
        @click="onClick(item.value)">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { DELIVERY_MODE } from "../../constants/index";
import locale from "../../../../mixins/locale";

export default {
  name: 'ModeSelect',
  props: {
    // 选择哪种配送方式
    mode: {
      type: Number,
      default: 1
    },
    btnBg:{
      type: String,
      default: '#fff'
    },
    customDeliveryType: {
      type: Array,
      default: ()=>{
        return []
      }
    },
  },
  mixins: [locale],
  data() {
    return {
      // 配送方式数组
      modes: [],
      // 配送方式数组
      modes1: [
        {
          value: DELIVERY_MODE.EXPRESSAGE,
          name: this.t('modeSelect_express_delivery')
        },
        {
          value: DELIVERY_MODE.PICK,
          name: this.t('modeSelect_self_delivery')
        }
      ],
      modes2: [
        {
          value: DELIVERY_MODE.PICK,
          name: this.t('modeSelect_self_delivery')
        },
        {
          value: DELIVERY_MODE.EXPRESSAGE,
          name: this.t('modeSelect_express_delivery')
        },
      ],
    };
  },
  methods: {
    onClick(index) {
      console.log('onClick',index);
      this.$emit('change', index);
    }
  },
  watch:{
    customDeliveryType:{
      handler(newVal, oldVal){
        this.modes = newVal[0] === "express_delivery" ? this.modes1 : this.modes2;
      },
      immediate: true,
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
.mode-select {
  height: 1.24rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 0.2rem;


  .mode-boxs {
    display: flex;
    width: 4rem;
    height: .8rem;
    color: #ccc;
    line-height: .8rem;
    font-size: .28rem;
    text-align: center;
    border-radius: .4rem;

    .mode-btn {
      width: 2rem;
      height: 100%;
      border-radius: .4rem;
    }

    .is-active {
      background: #105cfb;
      color: #fff;
      border-radius: .4rem;
    }
  }
}
</style>
